﻿<!doctype html>
<html>
<head>
<title>jQuery左右列表选择点击切换代码</title>
<meta charset="utf-8">

<link rel="stylesheet" href="css/list-style.css">

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/list-script.js"></script>
<script>
	$(function(){
		$('#selectTitle').initList();
	})
</script>

</head>
<body><script src="/demos/googlegg.js"></script>
<h2 style="text-align:center;">列表选择</h2>
<div id="selectTitle" class="list-select">
	<div class="list-title">
		<h4>想吃什么水果呢。。。</h4>
	</div>
	<div class="list-body">
		<div class="item-box left-box">
			<!-- 左边框初始化待选项 -->
			<span class="item" data-id="xigua">西瓜</span>
			<span class="item" data-id="pingguo">苹果</span>
			<span class="item" data-id="xiangjiao">香蕉</span>
			<span class="item" data-id="boluo">菠萝</span>
			<span class="item" data-id="caomei">草莓</span>
			<span class="item" data-id="yali">鸭梨</span>
			<span class="item" data-id="mitao">蜜桃</span>
			<span class="item" data-id="sangguo">桑果</span>
			<span class="item" data-id="yangmei">杨梅</span>
			<span class="item" data-id="putao">葡萄</span>
		</div>
		<div class="center-box">
			<button class="add-one" title="添加选中项">></button>
			<button class="add-all" title="添加全部">>></button>
			<button class="remove-one" title="移除选中项"><</button>
			<button class="remove-all" title="移除全部"><<</button>
		</div>
		<div class="item-box right-box">
			<!-- 右边框存放已选项 -->
		</div>
	</div>
	<div class="list-footer">
		<button class="selected-val" title="获取选择值，输出到控制台">GET</button>
	</div>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p>
</div>
</body>
</html>
